<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--el与data的两种写法：
el:
  -el:'#app'
  -
data:
    -对象式：
    data:{
        属性名:属性值
    }

    -函数式：
    data(){
       return{属性名:属性值}
    }

-->

<div id="root">
  {{name}}

    <!--尝试使用Vue对象上的东西-->
    {{$options}}
    {{$el}}
    {{$emit}}
</div>

</body>
</html>
<script>
    // new Vue({
    //     //el写法一
    //     el:'#root',
    //     //data写法一 对象式
    //     data:{
    //         name:'张三'
    //     }
    // });

//data写法二
//     new Vue({
//         //el写法一
//         el:'#root',
//         //data写法二 函数式写法
//         data() {
//             //可以有js代码
//             var name = "张三";
//             //函数如果要提供值 就必须要返回
//             return {
//                 //name:'张三'
//                 //name:name
//                 name
//             }
//         }
//     });

    //el写法二
   //  const v = new Vue({
   //      //data写法一 对象式
   //      data:{
   //          name:'张三'
   //      }
   //  });
   // //将容器挂载到vue对象上
   //  console.log(v)
   //  v.$mount('#root');
   //

    //el+data二
   new Vue({
        data(){
            //this表示的是Vue对象 只要出现在Vue对象上的东西 都会在Vue对象中体现
            console.log('this是',this);
            return{
                name:'张三'
            }
        }
    }).$mount('#root');





</script>

<!--
MVVM模式：
M:Model 模型  data中的数据
V：View 视图  容器 模版代码
VM:ViewModel 视图模型 Vue的实例对象
补充：
  data中所有的属性都会出现在Vue对象（vm）上
  以后要使用可以直接使用

-->